// 提供复用的逻辑函数
import { useIntersectionObserver, useIntervalFn } from '@vueuse/core'
import { ref, onUnmounted } from 'vue'
import * as dayjs from 'dayjs'

/**
 *数据懒加载函数
 * @param {Element} target Dom对象
 * @param {Function} apiFn api函数
 */
// target 是观察的目标dom容器，必须是dom容器，而且是vue3.0方式绑定的dom对象
// isIntersecting 是否进入可视区域，true是进入 false是移出
// observerElement 被观察的dom
export const useLazyData = apiFn => {
        const result = ref([])
        const target = ref(null)
            // stop停止观察
            // target 监听的目标元素
            //isIntersecting 表示是否进入可视区
        const { stop } = useIntersectionObserver(
            target,
            ([{ isIntersecting }], observerElement) => {
                if (isIntersecting) {
                    // 在此处可根据isIntersecting来判断，然后做业务
                    stop()
                    apiFn().then(data => {
                        result.value = data.result
                    })
                }
            }, {
                threshold: 0
            }
        )

        return { result, target }
    }
    /**
     * 倒计时函数
     * @returns
     */
export const usePayTime = () => {
    // 接收传过来的时间数字
    const time = ref(0)
        // 转换的时间文字
    const timeText = ref('')
    const { pause, resume } = useIntervalFn(
            () => {
                time.value--
                    timeText.value = dayjs.unix(time.value).format('mm分ss秒')
                if (time.value <= 0) {
                    pause()
                }
            },
            1000,
            false
        )
        // 销毁页面的时候关闭定时器
    onUnmounted(() => {
        pause()
    })
    const start = countDown => {
        time.value = countDown
        resume()
    }
    return { start, timeText }
}